import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Text } = Typography;
const { TextArea } = Input;

export default function GrassPlantingAdvertisement() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const productNameRef = useRef<HTMLDivElement>(null);
  const productTypeRef = useRef<HTMLDivElement>(null);
  const audienceRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const featuresRef = useRef<HTMLDivElement>(null);
  const submitRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 生成种草文案的模拟函数
  const generateContent = (
    productName: string,
    productType: string,
    keyFeatures: string,
    targetAudience: string,
    style: string
  ): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 根据风格和产品类型添加开头
    if (style === '活泼生动') {
      result += `✨ 姐妹们！我发现了一款${productType}神器！${productName}真的绝了！必须按头安利给你们！\n\n`;
    } else if (style === '专业测评') {
      result += `📊 作为一名${productType}爱好者，我最近试用了${productName}，今天给大家带来一份专业测评。\n\n`;
    } else if (style === '情感共鸣') {
      result += `❤️ 不知道你们有没有这样的困扰... 直到我遇到了${productName}，它真的改变了我的生活！\n\n`;
    }

    // 产品特点展示
    result += "【产品特点】\n";

    if (keyFeatures) {
      // 将关键点分割成数组
      const features = keyFeatures.split('\n').filter(f => f.trim());

      features.forEach((feature, index) => {
        result += `💯 第${index + 1}点：${feature}\n`;
      });
    } else {
      // 根据产品类型生成默认特点
      if (productType === '护肤品') {
        result += "💧 质地清爽不油腻，吸收超快\n";
        result += "✨ 成分安全温和，敏感肌也能放心用\n";
        result += "🌈 效果立竿见影，用了一周就有明显改善\n";
      } else if (productType === '彩妆') {
        result += "💄 颜色超级美，显白显气色\n";
        result += "💎 持久度惊人，一天都不脱妆\n";
        result += "🌟 性价比超高，媲美大牌\n";
      } else if (productType === '服饰') {
        result += "👗 设计时尚百搭，随便搭都好看\n";
        result += "👖 面料舒适亲肤，穿着超舒服\n";
        result += "👠 版型显瘦，遮住各种小缺点\n";
      } else if (productType === '数码产品') {
        result += "📱 性能超强，运行流畅不卡顿\n";
        result += "🔋 续航持久，一天用下来还有电\n";
        result += "🎨 外观设计精美，拿出去超有面子\n";
      }
    }

    // 个人使用体验
    result += "\n【使用体验】\n";
    result += `我已经用了${productName}大概两周了，真的被它的效果惊艳到了！\n`;
    result += "刚开始只是抱着试试看的心态，没想到...\n\n";

    // 针对目标受众的建议
    result += "【适用人群】\n";
    if (targetAudience === '学生党') {
      result += "🎓 学生党必入！价格亲民，效果却不输大牌~\n";
    } else if (targetAudience === '职场人士') {
      result += "💼 职场人士必备！提升生活品质的利器~\n";
    } else if (targetAudience === '宝妈') {
      result += "👶 宝妈们看过来！性价比超高，值得拥有~\n";
    } else {
      result += "👯 不管你是谁，这个产品都能给你带来惊喜~\n";
    }

    // 购买建议和提醒
    result += "\n【购买建议】\n";
    result += "👉 现在入手还有优惠，赶紧冲！\n";
    result += "👉 记得认准官方渠道购买，避免买到假货\n";
    result += "👉 按照说明使用，效果会更好哦~\n\n";

    // 结尾呼吁
    if (style === '活泼生动') {
      result += "总之，这款产品我已经无限回购了！姐妹们真的可以试试，相信我，你一定会爱上它的！💕\n";
    } else if (style === '专业测评') {
      result += "综合来看，这款产品的表现非常出色，我给它打9.5分！推荐指数五颗星！⭐⭐⭐⭐⭐\n";
    } else if (style === '情感共鸣') {
      result += "好东西就是要和大家分享！希望我的分享能帮到正在寻找这类产品的你~\n";
    }

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { productName, productType, keyFeatures, targetAudience, style } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(productName, productType, keyFeatures, targetAudience, style);
      setGeneratedContent(generated);
      message.success('种草文案生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '种草文案.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 定义引导步骤
  const tourSteps = [
    {
      key: 'productName',
      title: '输入产品名称',
      description: '请输入您要推荐的产品名称',
    },
    {
      key: 'productType',
      title: '选择产品类型',
      description: '选择产品的具体类型，如护肤品、彩妆等',
    },
    {
      key: 'audience',
      title: '选择目标受众',
      description: '选择您的文案针对的目标人群',
    },
    {
      key: 'style',
      title: '选择文案风格',
      description: '选择您喜欢的文案风格，如活泼生动、专业测评等',
    },
    {
      key: 'features',
      title: '产品特点（可选）',
      description: '输入产品的核心特点，每行一个特点，如不填写将自动生成',
    },
    {
      key: 'submit',
      title: '生成种草文案',
      description: '点击按钮生成吸引人的种草文案',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的种草文案',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    productName: productNameRef,
    productType: productTypeRef,
    audience: audienceRef,
    style: styleRef,
    features: featuresRef,
    submit: submitRef,
    result: resultRef,
  };

  // 产品类型选项
  const productTypeOptions = [
    { label: '护肤品', value: '护肤品' },
    { label: '彩妆', value: '彩妆' },
    { label: '服饰', value: '服饰' },
    { label: '数码产品', value: '数码产品' },
    { label: '家居用品', value: '家居用品' },
    { label: '其他', value: '其他' },
  ];

  // 目标受众选项
  const audienceOptions = [
    { label: '学生党', value: '学生党' },
    { label: '职场人士', value: '职场人士' },
    { label: '宝妈', value: '宝妈' },
    { label: '大众', value: '大众' },
  ];

  // 文案风格选项
  const styleOptions = [
    { label: '活泼生动', value: '活泼生动' },
    { label: '专业测评', value: '专业测评' },
    { label: '情感共鸣', value: '情感共鸣' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <div style={{ marginBottom: 24 }}>
          <Title level={2} style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
            种草文案生成
            <TourGuideButton onClick={showTour} />
          </Title>
        </div>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              productType: '护肤品',
              targetAudience: '学生党',
              style: '活泼生动',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productName"
                  label="产品名称"
                  rules={[{ required: true, message: '请输入产品名称' }]}
                >
                  <div ref={productNameRef}>
                    <Input placeholder="请输入产品名称" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productType"
                  label="产品类型"
                  rules={[{ required: true, message: '请选择产品类型' }]}
                >
                  <div ref={productTypeRef}>
                    <Select placeholder="请选择产品类型" options={productTypeOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="targetAudience"
                  label="目标受众"
                  rules={[{ required: true, message: '请选择目标受众' }]}
                >
                  <div ref={audienceRef}>
                    <Select placeholder="请选择目标受众" options={audienceOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="style"
                  label="文案风格"
                  rules={[{ required: true, message: '请选择文案风格' }]}
                >
                  <div ref={styleRef}>
                    <Select placeholder="请选择文案风格" options={styleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="keyFeatures"
                  label="产品特点（可选）"
                >
                  <div ref={featuresRef}>
                    <TextArea rows={4} placeholder="请输入产品的核心特点，每行一个特点，如不填写将自动生成" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={submitRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成种草文案'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
    </>
  );
}